<script setup>
/*声明本地持久化st*/
import blogStore from "@/stores/arlog.js";
import api from "@/api/api.js";
import {NButton, uploadDark} from "naive-ui";
import base from "@/api/base.js";

const st = blogStore()

/*修改料弹出变量*/
const showModal = ref(false)
const showUpModal = ref(false)

/*弹窗*/
function Add() {
  showModal.value = true
}

/*上传弹窗*/
function UPAdd() {
  showUpModal.value = true
}

const formValue = ref({
  username: st.user,
  power: st.power,
  img: st.img,
  phone: st.phone,
  mail: st.mail,
  gitee: st.gitee,
  qq: st.qq,
  wechat: st.wechat,
  otp: st.otp,
})
const add = () => {

  api.upUser(formValue.value).then(
      res => {
        // 提示
        $message.success("更新:" + res.data.msg)
        st.otp = formValue.value.otp
        st.power = formValue.value.power
        st.phone = formValue.value.phone
        st.mail = formValue.value.mail
        st.gitee = formValue.value.gitee
        st.qq = formValue.value.qq
        st.wechat = formValue.value.wechat
        st.img = formValue.value.img
        showModal.value = false
      }
  )

}
/*悬着器*/
const options = [
  {
    label: "管理员",
    value: "admin",

  },
  {
    label: "游客",
    value: ""
  },
]

/*自动触发*/
onMounted(() => {


  $loadingBar.start()
  setTimeout(() => {
    /*关闭加载*/
    $loadingBar.finish()
  }, 200)


})
/*上传回调*/
// 处理上传完成的逻辑
const handleFinish = ({file, event}) => {
  const response = JSON.parse(event?.target?.response)


  formValue.value.img = response.result

  api.upUser(formValue.value).then(
      res => {
        // 提示
        $message.success("更新:" + res.data.msg)
        st.img = formValue.value.img
        showUpModal.value = false
      }
  )
  return file
}
// beforeUpload 函数
const beforeUpload = async (data) => {
  if (data.file.file?.type !== "image/png") {
    $message.error("只能上传png格式的图片文件，请重新上传");
    return false;
  }
  return true;
}

</script>

<template>
  <n-card>
    <n-space align="center">
      <n-avatar :size="100" :src=st.img round/>
      <div class="ml-20">
        <div class="flex items-center text-16">
          <span>用户名:</span>
          <span class="ml-12 opacity-80">{{ st.user }}</span>

        </div>
        <div class="mt-16 flex items-center">
          <n-button ghost type="primary" @click="UPAdd">
            更改头像
          </n-button>
          <span class="ml-12 opacity-60">
              修改头像只支持在线链接，不提供上传图片功能，如有需要可自行对接！
            </span>
        </div>
      </div>
    </n-space>
  </n-card>


  <n-card class="mt-20" title="个人资料信息">
    <template #header-extra>
      <n-button text type="primary" @click="Add">
        修改资料
      </n-button>
    </template>

    <n-descriptions
        :column="1"
        :label-style="{ width: '200px', textAlign: 'center' }"
        bordered
        label-placement="left"
    >
      <n-descriptions-item label="权限">
        {{ st.power }}
      </n-descriptions-item>
      <n-descriptions-item label="头像">
        {{ st.img }}
      </n-descriptions-item>
      <n-descriptions-item label="手机号">
        {{ st.phone }}
      </n-descriptions-item>
      <n-descriptions-item label="邮箱">
        {{ st.mail }}
      </n-descriptions-item>
      <n-descriptions-item label="gitee账号">
        {{ st.gitee }}
      </n-descriptions-item>
      <n-descriptions-item label="qq">
        {{ st.qq }}
      </n-descriptions-item>
      <n-descriptions-item label="微信号">
        {{ st.wechat }}
      </n-descriptions-item>
      <n-descriptions-item label="otp">

        {{ st.otp }}
      </n-descriptions-item>
      <n-descriptions-item label="ip">
        {{ st.ip }}
      </n-descriptions-item>
    </n-descriptions>
  </n-card>


  <!--动态弹出框-->
  <n-modal v-model:show="showModal">
    <n-card
        :bordered="false"
        aria-modal="true"
        role="dialog"
        size="huge"
        style="width: 600px"
        title="更新资料"
    >
      <n-form ref="formRef" :model="formValue">


        <n-form-item label="头像">
          <n-input v-model:value="formValue.img"
          />
        </n-form-item>
        <n-form-item label="权限">

          <n-select v-model:value="formValue.power" :options="options"/>
        </n-form-item>
        <n-form-item label="手机号">
          <n-input v-model:value="formValue.phone"
          />
        </n-form-item>
        <n-form-item label="邮箱">
          <n-input v-model:value="formValue.mail"
          />
        </n-form-item>


        <n-form-item label="gitee账号">
          <n-input v-model:value="formValue.gitee"
          />
        </n-form-item>
        <n-form-item label="qq">
          <n-input v-model:value="formValue.qq" clearable
          />
        </n-form-item>
        <n-form-item label="微信号">
          <n-input v-model:value="formValue.wechat"
          />
        </n-form-item>

        <n-form-item label="otp">

          <n-input v-model:value="formValue.otp"
          />
        </n-form-item>
      </n-form>

      <template #footer>
        <div class="grid place-items-end ">
          <n-button class="w-100" type="info" @click="add">
            确认
          </n-button>
        </div>
      </template>
    </n-card>
  </n-modal>


  <!--动态弹出框-->
  <n-modal v-model:show="showUpModal">
    <n-card
        :bordered="false"
        aria-modal="true"
        role="dialog"
        size="huge"
        style="width: 400px"
        title="上传"
    >

      <!--上传接口-->
      <n-upload
          :action=base.upload
          :headers="{
      'token': st.token,
    }"
          @finish=handleFinish
          @before-upload="beforeUpload"
      >
        <div class="flex items-center justify-center w-320">
          <n-button>上传头像</n-button>
        </div>
      </n-upload>


    </n-card>
  </n-modal>
</template>

<style scoped>

</style>